JavaScript 클로저: 실용적인 예시로 이해하기

클로저는 모든 수준의 개발자에게 혼란을 야기하는 경우가 많은 JavaScript의 기본 개념입니다. 클로저를 이해하는 것은 효율적이고, 유지 관리 가능하며, 안전한 코드를 작성하는 데 매우 중요합니다. 이 포괄적인 가이드는 실용적인 예시를 통해 클로저를 명확히 설명하고 실제 적용 사례를 보여줍니다.

클로저란 무엇인가?

간단히 말해서, 클로저는 함수와 해당 함수가 선언된 어휘적 환경의 조합입니다. 즉, 클로저를 사용하면 외부 함수가 실행을 완료한 후에도 함수가 주변 스코프의 변수에 액세스할 수 있습니다. 내부 함수가 해당 환경을 "기억"한다고 생각하면 됩니다.

이것을 진정으로 이해하려면 핵심 구성 요소를 분석해 보겠습니다.

• 함수: 클로저의 일부를 형성하는 내부 함수입니다.
• 어휘적 환경: 함수가 선언된 주변 스코프입니다. 여기에는 변수, 함수 및 기타 선언이 포함됩니다.

내부 함수가 외부 함수가 반환된 후에도 해당 어휘적 스코프의 변수에 대한 액세스를 유지하기 때문에 마법이 일어납니다. 이 동작은 JavaScript가 스코프와 메모리 관리를 처리하는 방식의 핵심 부분입니다.

클로저가 중요한 이유는 무엇인가?

클로저는 단순한 이론적 개념이 아니라 JavaScript에서 많은 일반적인 프로그래밍 패턴에 필수적입니다. 다음과 같은 이점을 제공합니다.

• 데이터 캡슐화: 클로저를 사용하면 개인 변수와 메서드를 생성하여 외부 액세스 및 수정으로부터 데이터를 보호할 수 있습니다.
• 상태 보존: 클로저는 함수 호출 간 변수의 상태를 유지하며, 카운터, 타이머 및 기타 상태 저장 구성 요소를 만드는 데 유용합니다.
• 고차 함수: 클로저는 종종 고차 함수(다른 함수를 인수로 사용하거나 함수를 반환하는 함수)와 함께 사용되어 강력하고 유연한 코드를 가능하게 합니다.
• 비동기 JavaScript: 클로저는 콜백 및 프로미스와 같은 비동기 작업을 관리하는 데 중요한 역할을 합니다.

JavaScript 클로저의 실용적인 예시

클로저가 어떻게 작동하고 실제 시나리오에서 어떻게 사용할 수 있는지 설명하기 위해 몇 가지 실용적인 예시를 살펴보겠습니다.

예시 1: 간단한 카운터

이 예시는 클로저를 사용하여 함수 호출 간에 상태를 유지하는 카운터를 만드는 방법을 보여줍니다.

            
function createCounter() {
  let count = 0;

  return function() {
    count++;
    console.log(count);
  };
}

const increment = createCounter();

increment(); // Output: 1
increment(); // Output: 2
increment(); // Output: 3

            

              
                Copy
              
            
          

설명:

• createCounter()는 변수 count를 선언하는 외부 함수입니다.
• count를 증가시키고 해당 값을 로깅하는 내부 함수(이 경우 익명 함수)를 반환합니다.
• 내부 함수는 count 변수에 대한 클로저를 형성합니다.
• createCounter()가 실행을 완료한 후에도 내부 함수는 count 변수에 대한 액세스를 유지합니다.
• increment()에 대한 각 호출은 동일한 count 변수를 증가시켜 클로저가 상태를 보존하는 기능을 보여줍니다.

예시 2: 개인 변수를 사용한 데이터 캡슐화

클로저를 사용하여 개인 변수를 생성하여 함수 외부에서 직접 액세스하고 수정하는 것을 방지할 수 있습니다.

            
function createBankAccount(initialBalance) {
  let balance = initialBalance;

  return {
    deposit: function(amount) {
      balance += amount;
      return balance; //Returning for demonstration, could be void
    },
    withdraw: function(amount) {
      if (amount <= balance) {
        balance -= amount;
        return balance; //Returning for demonstration, could be void
      } else {
        return "Insufficient funds.";
      }
    },
    getBalance: function() {
      return balance;
    }
  };
}

const account = createBankAccount(1000);

console.log(account.deposit(500)); // Output: 1500
console.log(account.withdraw(200)); // Output: 1300
console.log(account.getBalance()); // Output: 1300

// Trying to access balance directly will not work
// console.log(account.balance); // Output: undefined

            

              
                Copy
              
            
          

설명:

• createBankAccount()는 입금, 출금 및 잔액을 가져오는 메서드가 있는 은행 계좌 객체를 생성합니다.
• balance 변수는 createBankAccount()의 스코프 내에서 선언되며 외부에서 직접 액세스할 수 없습니다.
• deposit, withdraw 및 getBalance 메서드는 balance 변수에 대한 클로저를 형성합니다.
• 이러한 메서드는 balance 변수에 액세스하여 수정할 수 있지만 변수 자체는 비공개로 유지됩니다.

예시 3: 루프에서 `setTimeout`과 함께 클로저 사용하기

클로저는 특히 루프 내에서 setTimeout과 같은 비동기 작업으로 작업할 때 필수적입니다. 클로저가 없으면 JavaScript의 비동기 특성으로 인해 예기치 않은 동작이 발생할 수 있습니다.

            
for (var i = 1; i <= 5; i++) {
  (function(j) {
    setTimeout(function() {
      console.log("Value of i: " + j);
    }, j * 1000);
  })(i);
}

// Output:
// Value of i: 1 (after 1 second)
// Value of i: 2 (after 2 seconds)
// Value of i: 3 (after 3 seconds)
// Value of i: 4 (after 4 seconds)
// Value of i: 5 (after 5 seconds)

            

              
                Copy
              
            
          

설명:

• 클로저(즉시 호출 함수 표현식 또는 IIFE)가 없으면 모든 setTimeout 콜백이 결국 루프가 완료된 후 최종 값이 6이 되는 동일한 i 변수를 참조합니다.
• IIFE는 루프의 각 반복에 대해 새 스코프를 생성하여 j 매개변수에 i의 현재 값을 캡처합니다.
• 각 setTimeout 콜백은 j 변수에 대한 클로저를 형성하여 각 반복에 대해 i의 올바른 값을 로깅합니다.

루프에서 var 대신 let을 사용해도 이 문제가 해결되며, let은 각 반복에 대해 블록 스코프를 생성합니다.

            
for (let i = 1; i <= 5; i++) {
  setTimeout(function() {
    console.log("Value of i: " + i);
  }, i * 1000);
}

// Output (same as above):
// Value of i: 1 (after 1 second)
// Value of i: 2 (after 2 seconds)
// Value of i: 3 (after 3 seconds)
// Value of i: 4 (after 4 seconds)
// Value of i: 5 (after 5 seconds)

            

              
                Copy
              
            
          

예시 4: 커링 및 부분 적용

클로저는 여러 인수를 사용하는 함수를 각각 단일 인수를 사용하는 함수의 시퀀스로 변환하는 데 사용되는 기술인 커링 및 부분 적용의 기본입니다.

            
function multiply(a) {
  return function(b) {
    return function(c) {
      return a * b * c;
    };
  };
}

const multiplyBy5 = multiply(5);
const multiplyBy5And2 = multiplyBy5(2);

console.log(multiplyBy5And2(3)); // Output: 30 (5 * 2 * 3)

            

              
                Copy
              
            
          

설명:

• multiply는 한 번에 세 개의 인수를 사용하는 커링된 함수입니다.
• 각 내부 함수는 외부 스코프(a, b)의 변수에 대한 클로저를 형성합니다.
• multiplyBy5는 이미 a를 5로 설정한 함수입니다.
• multiplyBy5And2는 이미 a를 5로 설정하고 b를 2로 설정한 함수입니다.
• multiplyBy5And2(3)에 대한 최종 호출은 계산을 완료하고 결과를 반환합니다.

예시 5: 모듈 패턴

클로저는 JavaScript 코드를 구성하고 구조화하고, 모듈성을 촉진하고, 이름 충돌을 방지하는 데 도움이 되는 모듈 패턴에서 널리 사용됩니다.

            
const myModule = (function() {
  let privateVariable = "Hello, world!";

  function privateMethod() {
    console.log(privateVariable);
  }

  return {
    publicMethod: function() {
      privateMethod();
    },
    publicProperty: "This is a public property."
  };
})();

console.log(myModule.publicProperty); // Output: This is a public property.
myModule.publicMethod(); // Output: Hello, world!

// Trying to access privateVariable or privateMethod directly will not work
// console.log(myModule.privateVariable); // Output: undefined
// myModule.privateMethod(); // Output: TypeError: myModule.privateMethod is not a function

            

              
                Copy
              
            
          

설명:

• IIFE는 privateVariable과 privateMethod를 캡슐화하는 새 스코프를 생성합니다.
• 반환된 객체는 publicMethod와 publicProperty만 노출합니다.
• publicMethod는 privateMethod 및 privateVariable에 대한 클로저를 형성하여 IIFE가 실행된 후에도 액세스할 수 있습니다.
• 이 패턴은 실제로 개인 및 공개 멤버가 있는 모듈을 생성합니다.

클로저와 메모리 관리

클로저는 강력하지만 메모리 관리에 미치는 잠재적 영향을 인식하는 것이 중요합니다. 클로저는 주변 스코프의 변수에 대한 액세스를 유지하므로 더 이상 필요하지 않은 경우 해당 변수가 가비지 수집되지 않도록 할 수 있습니다. 이로 인해 주의해서 처리하지 않으면 메모리 누수가 발생할 수 있습니다.

메모리 누수를 방지하려면 더 이상 필요하지 않은 경우 클로저 내의 변수에 대한 불필요한 참조를 중단해야 합니다. 변수를 null로 설정하거나 불필요한 클로저 생성을 피하도록 코드를 재구성하여 이를 수행할 수 있습니다.

피해야 할 일반적인 클로저 실수

• 어휘적 스코프 잊어버리기: 클로저는 *생성 당시* 환경을 캡처한다는 것을 항상 기억하십시오. 클로저가 생성된 후 변수가 변경되면 클로저는 해당 변경 사항을 반영합니다.
• 불필요한 클로저 생성: 성능과 메모리 사용에 영향을 미칠 수 있으므로 필요하지 않은 경우 클로저 생성을 피하십시오.
• 변수 유출: 클로저에서 캡처된 변수의 수명을 염두에 두고 메모리 누수를 방지하기 위해 더 이상 필요하지 않을 때 해제했는지 확인하십시오.

결론

JavaScript 클로저는 모든 JavaScript 개발자가 이해해야 하는 강력하고 필수적인 개념입니다. 데이터 캡슐화, 상태 보존, 고차 함수 및 비동기 프로그래밍을 가능하게 합니다. 클로저의 작동 방식과 효과적으로 사용하는 방법을 이해하면 보다 효율적이고, 유지 관리 가능하며, 안전한 코드를 작성할 수 있습니다.

이 가이드에서는 실용적인 예시를 통해 클로저에 대한 포괄적인 개요를 제공했습니다. 이러한 예시를 연습하고 실험함으로써 클로저에 대한 이해를 높이고 더 능숙한 JavaScript 개발자가 될 수 있습니다.

추가 학습

• Mozilla Developer Network (MDN): 클로저 - https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures
• You Don't Know JS: Scope & Closures by Kyle Simpson
• CodePen 및 JSFiddle과 같은 온라인 코딩 플랫폼을 탐색하여 다양한 클로저 예시를 실험해 보세요.